<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>确认登录</title>
    <script type="text/javascript" th:src="${contextPath}+'/js/jweixin-1.3.2.js'" src="/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript" th:src="${contextPath}+'/js/jquery-1.9.1.js'" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" th:src="${contextPath}+'/js/alertPopShow.js'" src="/js/alertPopShow.js"></script>
    <link rel="stylesheet" th:href="${contextPath}+'/style/alert.css'" href="/style/alert.css"/>
    <link rel="stylesheet" th:href="${contextPath}+'/style/base.css'" href="/style/base.css"/>
    <style>
        body, html {
            margin: 0;
            padding: 10px;
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            /*align-items: center;*/
            background: linear-gradient(135deg, #d7ff5f, #7bfedb);
        }

        .container {
            text-align: center;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            width: 300px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;/*水平居中*/
            /*align-items: center;!*垂直居中*!*/
        }

        h1 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

        p {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .headImg{
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        .title{
            text-align: center;
            font-size: 18px;
            color: rgb(255, 255, 255);
        }

        .wechat-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 5px;
            background-color: #1aad19;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .wechat-button:hover {
            background-color: #148f12;
        }

        .wechat-icon {
            width: 44px;
            height: 44px;
            margin-right: 10px;
        }

        .login-header {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            text-align: center; /* 确保文本在h1标签内居中，尽管在flex布局中可能不需要 */
        }

        .sys-icon {
            margin-left: 10px; /* 添加一些左边距，使图片和文字之间有一点间隔 */
            height: 40px; /* 你可以根据需要调整图片的高度 */
            border-radius: 20px;
            width: auto; /* 保持图片的宽高比 */
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            display: none;
            border-radius: 10px;
        }

        .loading-spinner {
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-left-color: #ffffff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .loading-overlay p {
            color: white;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

        <input type="hidden" id="webSocketPath" name="webSocketPath" th:value="${webSocketPath}" value="无名微信">
        <input type="hidden" id="nickname" name="nickname" th:value="${fans.nickname}" value="无名微信">
        <input type="hidden" id="unionid" name="unionid" th:value="${fans.unionid}" value="unionid">
        <input type="hidden" id="openid" name="openid" th:value="${fans.openid}" value="openid">
        <input type="hidden" id="fansId" name="fansId" th:value="${fans.id}" value="fansId">
        <input type="hidden" id="headImgUrl" name="headImgUrl" th:value="${fans.headImgUrl}" value="headImgUrl">
        <input type="hidden" id="sysCode" name="sysCode" th:value="${sysCode}" value="sysCode">
        <input type="hidden" id="sysName" name="sysName" th:value="${sysName}" value="sysName">
        <input type="hidden" id="wsSessionId" name="wsSessionId" th:value="${wsSessionId}" value="wsSessionId">
        <input type="hidden" id="timestamp" name="timestamp" th:value="${timestamp}" value="timestamp">
        <input type="hidden" id="signature" name="signature" th:value="${signature}" value="signature">
        <section id="mask_img" style="display: none">
            <section style=""><img th:src="${contextPath}+'/img/lodging.gif'" src="/img/lodging.gif"
                                   style="width:30px;"/>
            </section>
        </section>




        <div th:if="${fans != null}">
            <div><img class="headImg" th:src="${fans.headImgUrl}"></div>
            <!--    <input type="button" value="提交"/>-->
            <div class="title" th:text="${fans.nickname}">用户名</div>

        </div>

        <div th:if="${errorMsg != null}">
            <p th:text="${errorMsg}">出错提示！</p>
        </div>

<script type="text/javascript">
    let sysCode = document.getElementById("sysCode").value;
    let sysName = document.getElementById("sysName").value;
    let wsSessionId = document.getElementById("wsSessionId").value;
    let webSocketPath = document.getElementById("webSocketPath").value;


    //websocket连接地址,h5-confirm的最后参数为3
    let webSocketUrl = "ws://" + webSocketPath + "/qrLoginWebsocket/" + sysCode + "/3";
    console.log("webSocketUrl:" + webSocketUrl);

    //遮罩
    function mask() {
        $("#mask_img").css("display", "block")
    }

    function maskNone() {
        $("#mask_img").css("display", "none")
    }

    $(function () {
        //建立WebSocket连接
        var ws = new WebSocket(webSocketUrl);
        if ("WebSocket" in window) {
            //alert("您的浏览器支持 WebSocket!");
            // 打开一个 web socket
            ws.onopen = function () {
                // h5-confirm的Socket已连接上，通知服务端，并在本页弹出确认登录的提示
                const wsMsg = {
                    code: 311,
                    wsSessionId: wsSessionId,
                    msgData: {
                        sysCode: sysCode,
                        openid: document.getElementById("openid").value,
                        nickname: document.getElementById("nickname").value,
                        headImgUrl: document.getElementById("headImgUrl").value,
                        timestamp: document.getElementById("timestamp").value,
                        signature: document.getElementById("signature").value
                    }
                };
                ws.send(JSON.stringify(wsMsg));

                mask();
                popTipShow.confirm("登录提示", "您是否确认登录" + sysName, ['登录', '不登录'],
                    function (e) {
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');
                        if (button == 'ok') {
                            maskNone();
                            // 确认登录，使用 send() 方法发送数据
                            const wsMsg = {
                                code: 314,
                                wsSessionId: wsSessionId
                            };
                            ws.send(JSON.stringify(wsMsg));
                            //关闭当前确认页面 -- 直接关闭的话，如果操作过快导致不能正常关闭，所以设置定时，0.5秒后执行关闭
                            setTimeout("WeixinJSBridge.call('closeWindow')", 500);
                        }
                        if (button == 'cancel') {
                            //按下取消按钮执行的操作
                            maskNone();
                            const wsMsg = {
                                code: 315,
                                wsSessionId: wsSessionId
                            };
                            ws.send(JSON.stringify(wsMsg));
                            //关闭当前确认页面 直接关闭的话，如果操作过快导致不能正常关闭，所以设置定时，0.5秒后执行关闭
                            setTimeout("WeixinJSBridge.call('closeWindow')", 500);
                        }
                    }
                );
            };

            ws.onmessage = function (evt) {
                let wsMsg = JSON.parse(evt.data);
                console.log(wsMsg)
                if (wsMsg.code == 133) {
                    console.log('收到授权获取的微信消息');
                    console.log(wsMsg.data);
                    const respWsMsg = {
                        code: 313,
                        wsSessionId: wsSessionId,
                        data: '收到，将展示客户头像与昵称，请客户确认登录'
                    };
                    ws.send(JSON.stringify(respWsMsg));
                } else if (wsMsg.code == 134) {
                    console.log("web端已登录成功")
                } else if (wsMsg.code == 135) {
                    console.log("web端已取消登录了")
                }
            };

            ws.onclose = function () {
                // 关闭 websocket
                mask();
                popTipShow.alert('扫码失败', '二维码页面已关闭', ['退出'],
                    function (e) {
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');

                        if (button == 'ok') {
                            maskNone();
                            // 确认登录，使用 send() 方法发送数据
                            this.hide();
                            //关闭当前确认页面
                            WeixinJSBridge.call('closeWindow');
                        }
                    }
                );
            };

            //发生了错误事件
            ws.onerror = function (errorEvent) {
                // 处理错误
                console.error('WebSocket Error:', errorEvent);
                // 你可以尝试从 errorEvent 中获取有用的信息，但通常它只包含基本的错误描述
                console.error('Error message:', errorEvent.message); // 注意：并非所有浏览器都支持 message 属性
                // 你可以在这里执行其他错误处理逻辑，比如重连、显示错误消息等

                console.error("网络异常errorEvent：" + errorEvent + "errorEvent.message:" + errorEvent.message);
                for (let key in errorEvent) {
                    console.error(key + ": " + errorEvent[key]);
                }
            }
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
            console.log("您的浏览器不支持 WebSocket!");
        }

    });
</script>
</body>
</html>